<script setup>
  import { onMounted } from 'vue'

  onMounted(() => {
    // 1. 节点查询器（实例）
    const selectorQuery = uni.createSelectorQuery()

    // 2. 查找节点
    // 2.1 查找单个节点
    selectorQuery.select('.box').boundingClientRect((rect) => {
      // 获取宽高和位置
      console.log(rect)
    })

    // 2.2 查找全部节点
    selectorQuery.selectAll('.box').boundingClientRect((rects) => {
      // 获取宽高和位置
      console.log(rects)
    })

    // 2.3 查找视口信息
    selectorQuery.selectViewport().boundingClientRect((rect) => {
      console.log(rect)
    })

    // 3. 执行请求结果
    selectorQuery.exec()
  })
</script>

<template>
  <view> 节点查询🔍</view>
  <template>
    <custom-tabs></custom-tabs>
  </template>
  <view class="container">
    <view class="box">获取这个盒子的宽高、位置等信息</view>
    <view class="box"> 类选择器名称一样的另一个盒子 </view>
  </view>
</template>

<style>
  .box {
    width: 300px;
    height: 300px;
    background: #aaffff;
  }
</style>
